<template>
<div id="list">
<!-- // 整体 -->


            <div class="info-item" v-for="(item,index) in list"> <!-- 一条详情，遍历此 -->

                <div v-for="its in list[index].comment">
                <div class="item-header">
                    <div class="item-header-logo"><img :src="its.icon" /></div>
                    <div class="item-header-namedata">
                        <div class="name">{{its.nickname}}</div>
                        <div class="data">{{its.createtime}}</div>
                    </div>
                    <div class="item-header-rightdot">

                        <!-- <div class="dangban">回复</div> -->
                    </div>
                </div>

                <div class="item-desc"><span v-if="its.replayer_nickname? true : false">&nbsp;回复&nbsp;</span>
        <label class="pingluner" v-if="its.replayer_nickname? true : false">{{its.nickname}}：</label>{{its.content}}
</div>


                <div class="item-img">

                <div class="box">
                    <div class="imag" v-if="item.pic.length>0? true :false">
                      <img class="img" :src="item.pic[0]" alt="">
                    </div>

                    <div class="content">
                        <p v-for="it in item.content">
  {{it.flag}}:{{it.content}}

                        </p>

                    </div>

                </div>

                </div>
</div>

            </div>


</div>
</template>


<script>

export default {
    name: 'WorldIndex',
    props: {
        list: Array
    },
    data () {
        return {
            icon: '▶',
            swiperOption: {
            pagination: '.swiper-pagination',
            loop: true,
            autoplay: 5000,
        },
        author:'护肤宝',
        content:'这是文本介绍介绍介绍',
        Imglist: [
            {imgid:'0',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
            {imgid:'1',imgUrl:'https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg'},
            {imgid:'2',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
        ],
        headerImg: "https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg",


        }
    },
    props:{
      list:''
    },

    methods: {
        showstyle: function () {
            var iconCo = this.icon;
            this.icon = iconCo == '▶' ? '▼' : '▶';
        }
    },
    computed: {
        showSwiper () {
        return this.Imglist.length
        }
    }
}

</script>


<style>
.info-item{margin-top: 2rem}
.pingluner{color:#259E7B}
.box{height: 6rem;width: 90%;margin-left: 5%;background: lightgray;margin-bottom: 1rem;border-radius: 1rem}
.imag{float: left; width: 27%;height: 90%;background: lightgreen;border-radius: 1rem;overflow: hidden; margin-top: 0.3rem;margin-left: 0.5rem}
.img{width: 100%;height: 100%}
.content{margin-left: 1rem;float: left;margin-top: 0.5rem;font-size: 0.9rem;overflow: hidden;word-wrap: break-word;
word-break: normal; }
.top{background-color:#259E7B; padding:10px 0;display: flex;}
.Search{width: 75%;}
.top .left-icon{padding: 0 8px; font-size: 20px;color: #ffffff; width: 45px;}
.right-icon{padding: 0 10px;color: #ffffff;font-size: 22px;}
.top .van-tabbar-item__icon{font-size: 22px; margin: 3px 10px; color:#fff}
.van-search{padding:0}
.van-search .van-cell{background: #97D2C0; border-radius: 0; color:#ffffff}
.swiper-container-horizontal{height:200px;}
.wrapper .img{width:100%;}

/*** 详情列表 **/
.Infomation {padding: 10px;}

.item-header, .item-remark, .item-img  {display:flex;}
.item-header .item-header-rightdot{ position: absolute; right: 15px; text-align: center;}
.item-header .item-header-logo{width:3rem; height:3rem; margin-left: 5%}
.item-header .item-header-logo img{width:3rem; height:3rem;border-radius: 50%;}
.item-header-namedata {padding: 8px 15px;}
.item-header-namedata .name{ font-size:13px; font-weight: bold;}
.item-header-namedata .data{margin-top: 5px; color: #B6B6B6;}
.nianji{font-size:14px;}
.dangban{
    margin-top:1rem;
    color: #fff;
    background:lightgrey;
    padding: 1px 15px;
    border-radius: 16px;
}

.item-desc{padding: 10px 15px;font-size: 14px;
word-wrap: break-word;
word-break: normal;
}
.info-item  {margin-top:60px;}
.info-item:first-child{margin-top:10px;}
.info-item .item-img .item-imglist{width:33%; margin: 0 2px;}
.info-item .item-img .item-imglist img{max-width:100%;}
.item-remark{float: right;padding:10px; font-size: 14px;color: #B6B6B6;}
.item-remark .van-icon{ margin-right:5px;}

.van-card{width: 100%}
</style>
